<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="ScratchMaker青少年人工智能教育学习网站">
  <meta name="author" content="">
  <title>Scratch Maker Playground</title>
  <!-- Bootstrap Core CSS -->
  <link href="./bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script type="text/javascript" src="./jquery-3.5.0.min.js"></script>
  <!-- Custom CSS -->
  <link rel="stylesheet" href="./css/style.css">
  <link rel="stylesheet" type="text/css" href="./css/animate.min.css">
  <link href="./font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  <link href="./button.css" rel="stylesheet" type="text/css">
  <!-- Scratch Blocks Horizontal -->
  <script src="./local_blockly_compressed_horizontal.js"></script>
  <script src="./msg/messages.js"></script>
  <script src="./blocks_common/math.js"></script>
  <script src="./blocks_common/text.js"></script>
  <script src="./blocks_horizontal/control.js"></script>
  <script src="./blocks_horizontal/event.js"></script>
  <script src="./blocks_horizontal/wedo.js"></script>
  <script src="./blocks_horizontal/default_toolbox.js"></script>
  <script type="text/javascript" src="./jquery.json2xml.js"></script>
  <script type="text/javascript" src="./jquery.xml2json.js"></script>
  <!-- 积木代码解析 -->
  <script>
    console.log("\
    * Licensed MIT \n\
    * https://scratchmaker.cn \n\
    * Copyright 2020 MAMAMA \
    ")
    /*!
    * Licensed MIT
    * https://scratchmaker.cn
    * Copyright 2020 MAMAMA
    */
  
      var $xml = jQuery.noConflict();
      var code_finish = true;
      var code_running = false;
      var forever_id;
      function get_scratch_json() {
        var _code = Blockly.Xml.workspaceToDom(workspace);
        return $xml.xml2json(_code);
      }
  
  
      function color16(){//十六进制颜色随机
        var r = Math.floor(Math.random()*256);
        var g = Math.floor(Math.random()*256);
        var b = Math.floor(Math.random()*256);
        var color = '#'+r.toString(16)+g.toString(16)+b.toString(16);
        return color;
      }
  
      function run_code(c) {
        if (c["@type"] == "event_whenflagclicked") {
          console.log("green flag")
          code_running = true;
        }
        else if (c["@type"] == "wedo_setcolor") {
          color = c.value.shadow.field.text
          console.log(color)
          if(color == "mystery")box.color = color16()
          else box.color = color
        }
        else if (c["@type"] == "control_wait") {
          console.log("delay " + c.value.shadow.field.text + "s")
          if ('next' in c) {
            setTimeout(
              () => run_code(c.next.block),
              parseFloat(c.value.shadow.field.text) * 1000
            )
          }
          else
          {
            setTimeout(
              () => code_finish = true,
              parseFloat(c.value.shadow.field.text) * 1000
            )
          }
          return
        }
        else if (c["@type"] == "control_forever") {
          console.log("start infinite loop")
        }
  
        if ('next' in c) {
            return run_code(c.next.block);
        }
        else if (c["@type"] == "control_forever") {
          if ('statement' in c) {
            forever_id = setInterval(() => {
              if (code_running) {
                if (code_finish) {
                  code_finish = false;
                  run_code(c.statement.block);
                }
              }
            }
              , 10)
          }
        }
        else {
          code_finish = true;
          return;
        }
      }
  
      function parse_code() {
        if(code_running)
        {
          code_running = false;
          clearInterval(forever_id);
        }
        console.log('start parsing ...');
        var code = get_scratch_json();
        var green_flag;
        if ('block' in code) {
          var i;
          if (code.block.length == undefined) {
            // 仅有一个block组存在
            if (code.block["@type"] == "event_whenflagclicked") {
              run_code(code.block);
            }
          }
          else {
            // 多个离散的block在工作区的情况
            for (i = 0; i < code.block.length; i++) {
              if (code.block[i]["@type"] == "event_whenflagclicked") {
                green_flag = i;
                break;
              }
            }
            if (i < code.block.length) {
              run_code(code.block[green_flag]);
            }
            else {
              console.log("no start block!");
            }
          }
        }
        else {
          console.log('no blocks!')
        }
      }
    </script>
  
    <script>
      'use strict';
      var workspace = null;
  
      function start() {
  
        workspace = Blockly.inject('blocklyDiv', {
          comments: true,
          disable: false,
          collapse: false,
          media: './media/',
          readOnly: false,
          rtl: false,
          scrollbars: true,
          toolbox: document.getElementById('toolbox'),
          trashcan: true,
          horizontalLayout: true,
          toolboxPosition: 'end',
          sounds: null,
          grid: {
            spacing: 16,
            length: 1,
            colour: '#2C344A',
            snap: false
          },
          zoom: {
            controls: true,
            wheel: true,
            startScale: 1.0,
            maxScale: 4,
            minScale: 0.25,
            scaleSpeed: 1.1
          },
          colours: {
            fieldShadow: 'rgba(255, 255, 255, 0.3)',
            dragShadowOpacity: 0.6
          }
        });
  
        workspace.addChangeListener(block_change_handler);
  
        function block_change_handler(e) {
  
          // scratch默认方法有个bug，不能自动更新前端显示的数字
          function html_bug_fix(id, value) {
            var b = workspace.getBlockById(id);
            var b_text = b.inputList[0].fieldRow[0].textElement_
            b_text.innerHTML = value
          }
  
          if ("name" in e) {
            if (e.name == "NUM") {
              html_bug_fix(e.blockId, e.newValue);
            }
          }
        }
  
      }
  
    </script>
  
    <style>      
  
      #blocklyDiv {
        height: 400px;
        width: auto;
        text-align: left;
      }
  
      .code-func
      {
        display: inline-block;
        padding:10px;
        border-radius: 10%;
        border-style: dashed;
        height: 130px;
        border-width: 2px;
        border-color: rgba(34, 34, 34, 0.3);
      }
  
      .zdog-canvas
      {
        padding-bottom: 5px;
        border-radius: 50%;
        touch-action: none;
        box-shadow: 0px 0px 0px #aa905900, 0px 6px 0px rgba(0, 0, 0, 0.1);
      }
  
      .header
      {
        margin-bottom: 10px;
        text-align: right;
      }
    </style>

</head>

<body onload="start()">

  <!-- /////////////////////////////////////////Navigation -->
  <nav id="menu" class="navbar navbar-default navbar-fixed-top" style="background-color: #011F29;">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <a class="navbar-brand" href="index.html"><i class="fa fa-home"></i>
          ScratchMaker<strong></strong></a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->

      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>
  <!-- Navigation -->

  <!-- /////////////////////////////////////////Header -->
  <!-- Header -->

  <div id="page-content" class="sub-page">
    <section id="" class="box-content box-style text-center">
      <div class="container">
        <div class="row heading wow fadeInDown">
          <div class="col-lg-12">
              <hr>
              <h2 id="scratch-modal-title"><strong>Get Started</strong></h2>
          </div>
        </div>
        <div class="row">
          <div class="portfolio-items">
            <div class="col-sm-12 col-md-12 col-lg-12">              
                <!-- Google Blockly -->
                <div class="col-sm-6 col-md-6 col-lg-6" style="border-style: solid;border-width: 5px;padding: 0;margin: 0;">
                    <xml id="toolbox" style="display: none">
                        <block type="event_whenflagclicked"></block>                    
                        <block type="control_forever"></block>                    
                        <block type="control_wait">
                          <value name="DURATION">
                            <shadow type="math_number">
                              <field name="NUM">1</field>
                            </shadow>
                          </value>
                        </block>                    
                        <block type="wedo_setcolor">
                          <value name="CHOICE">
                            <shadow type="dropdown_wedo_setcolor">
                              <field name="CHOICE">mystery</field>
                            </shadow>
                          </value>
                        </block>                    
                      </xml>
                      <div id="blocklyDiv"></div>
                </div>
                <!-- Green Flag -->
                <div class="col-sm-6 col-md-6 col-lg-6">
                    <div style="text-align: center;">
                        <div class="code-func">
                            <i class="logo" onclick="parse_code()"><i class="fa fa-flag" style="color: #4cbf56;font-size: 50px;"></i></i>
                        </div>
                        <div class="code-func" style="top: 28px;position: relative;">
                            <canvas class="zdog-canvas" width="100%" height="100px"></canvas>
                        </div>
                        </div>
                    <div style="padding: 20px;">
                        <li style="text-align: left;">
                        <strong>Brief</strong>:</li>
                        <div id="scratch-modal-brief" style="text-align: left;">
                        这是一个简单的Scratch Block小测试，拖动积木到工作区，按照设定的逻辑点亮💡，
                        然后点击上面的<i class="fa fa-flag" style="color: #4cbf56;font-size: 20px;"></i>按钮，就可以看到有一个彩色的圆环亮起来啦！这个彩色的圆环基于zdog，具有3D动效哦~
                        </div>
                    </div>
                </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>

  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script type="text/javascript" src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

  <script src="./zdog.dist.min.js"></script>
  <script>
    let illo = new Zdog.Illustration({
      element: '.zdog-canvas',
      dragRotate: true,
    });

    // square
    var box = new Zdog.Ellipse({
      addTo: illo,
      diameter: 75,
      stroke: 20,
      color: "#f1b60f",
    });

    let isSpinning = true;

    function animate() {
        illo.rotate.y += isSpinning ? 0.03 : 0;
        illo.updateRenderGraph();
        requestAnimationFrame( animate );
    }
    animate();

  </script>

  <!-- /////////////////////////////////////////Footer -->
  <footer>
    <div id="footer">
      <div class="container">
        <p>Copyright &copy; 2020.MAMAMA All rights reserved.</p>
        <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31010602005146"
          style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="./shbeian.png"
            style="float:left;" />
          <p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">沪公网安备
            31010602005146号</p>
        </a>
      </div>
    </div>
  </footer>
  <!-- Footer -->
</body>

</html>